﻿


<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
		<meta name="format-detection" content="telephone=no">
		<meta name="format-detection" content="email=no">
		<link rel="shortcut icon" type="image/x-icon" href="">
		<link rel="stylesheet" type="text/css" href="css/normalize.min.css" />
		<script type="text/javascript" src="js/zepto.min.js"></script>
		<script type="text/javascript">
			
		</script>
		<!--<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>-->
		<title>咨询</title>
	</head>

	<body class="body" style="width: 100%;overflow: hidden;background-color: #FFFFFF;">

		<div class="form-page" id="p0">
			<div class="banner">
				<img class="wd-100" src="img/banner.png" />
				<img class="logo" src="img/logo.png" />
			</div>

			<div class="content">

				<div class="wd-100 input-item flex-box items-center">
					<div class="icon">
						<img src="img/ico0.png" />
					</div>
					<div class="placeho">
						<input type="text" disabled="" placeholder="企业名称" />
					</div>
					<div class="value">
						<input class="item" maxlength="40" type="text" id="comName" value="" />
					</div>
				</div>

				<div class="wd-100 input-item flex-box items-center">
					<div class="icon">
						<img src="img/ico1.png" />
					</div>
					<div class="placeho">
						<input type="text" disabled="" placeholder="货品名称" />
					</div>
					<div class="value">
						<input class="item" maxlength="30" type="text" id="goodName" value="" />
					</div>
				</div>

				<div class="wd-100 input-item flex-box items-center">
					<div class="icon">
						<img src="img/ico2.png" />
					</div>
					<div class="placeho">
						<input type="text" disabled="" placeholder="联系人" />
					</div>
					<div class="value">
						<input class="item" maxlength="30" type="text" id="linkMan" value="" />
					</div>
				</div>

				<div class="wd-100 input-item flex-box items-center">
					<div class="icon">
						<img src="img/ico3.png" />
					</div>
					<div class="placeho">
						<input type="text" disabled="" placeholder="手机号码" />
					</div>
					<div class="value">
						<input maxlength="11" class="item" type="tel" id="tel" value="" />
					</div>
				</div>

				<div class="wd-100 input-item flex-box items-center">
					<div class="icon">
						<img src="img/ico4.png" />
					</div>
					<div class="placeho">
						<input type="text" disabled="" placeholder="验证码" />
					</div>
					<div class="value" style="width: 30%;">
						<input maxlength="6" class="item" type="tel" id="code" value="" />
					</div>
					<div class="value" style="width: 35%;">
						<div class="getCode">获取验证码</div>
					</div>
				</div>
			</div>

			<div class="commit">立即咨询</div>
		</div>

		<div class="message">
			<div class="messagebody">
				<p class="message-text"></p>
			</div>
		</div>

		<script type="text/javascript">
			(function() {
				//设置跳转动画

				window.onload = function() {
					$('.form-page').addClass('move');
				};

				var sta = true;
				//显示提示信息
				function showMessage(msg) {
					$('.message-text').html(msg);
					$('.message').fadeIn(200,function(){
						setTimeout(function(){
							$('.message').fadeOut(200,function(){});
						},2000);
					});
				}
				
				function checkTel(tel){
					var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/; 
					return myreg.test(tel);
				}

				//初始化微信onBridgeReady
				Zepto(function($) {

					var codeStaue = '';
					//请求验证码
					function getCheckCode(tel) {
						$.ajax({
							type: 'GET',
							url: '/crm/api/sendRegSMS',
							data: {
								tel: tel
							},
							dataType: 'json',
							timeout: 10000,
							context: $('body'),
							success: function(data) {
								data = data ? data = JSON.stringify(data) : '';
								data = JSON.parse(data);
								if(data.status == 'success') {
									codeStaue = 'success';
									showMessage(data.message);
								}
							},
							error: function(xhr, type) {
								showMessage('验证码获取出错，请重新获取验证码');
							}
						});
					}

					//提交表单
					function commitForm(customer_name, linkman_name, linkman_phone, goods_name, code) {
						$.ajax({
							type: 'GET',
							url: '/crm/api/clueSave',
							data: {
								type:0,
								customer_name: $.trim(customer_name),
								linkman_name: $.trim(linkman_name),
								linkman_phone: $.trim(linkman_phone),
								goods_name: $.trim(goods_name),
								code: $.trim(code)
							},
							dataType: 'json',
							timeout: 10000,
							context: $('body'),
							success: function(data) {
								data = data ? data = JSON.stringify(data) : '';
								data = JSON.parse(data);
								if(data.code == 0 || data.code == '0') {
									window.location.href = "./result.html";
								} else {
									showMessage(data.message);
								}
							},
							error: function(xhr, type) {
								showMessage('提交失败');
							}
						});
					}

					var clock = null;
					var nums = 50;
					var btn;

					function sendCode(thisBtn, tel) {
						if(checkTel(tel)){
							if(nums == 50) {
								btn = thisBtn;
								btn.disabled = true; //将按钮置为不可点击
								btn.html(nums + 's后重新获取');
								clock = setInterval(doLoop, 1000); //一秒执行一次
								codeStaue = '';
								getCheckCode(tel);
							}
						}else{
							showMessage('请输入正确手机号');
						}
					}

					function doLoop() {
						nums--;
						if(nums > 0) {
							btn.html(nums + 's后重新获取');
						} else {
							clearInterval(clock); //清除js定时器
							btn.disabled = false;
							btn.html('获取验证码');
							nums = 50; //重置时间
						}
					}

					function onBridgeReady() {
						$('#closeButton').click(function() {
							closeClient()
						});
					}

					//点击开始倒计时
					$('.getCode').click(function() {
						var tel=$('#tel').val()?$.trim($('#tel').val()):'';
						if(tel==''){
							showMessage('请输入手机号');
						}else{
							sendCode($(this), tel);
						}
					});

					//点击提交表单

					document.querySelector('.commit').addEventListener('touchend', function(e) {
						e.preventDefault();
						e.stopPropagation();
						var comName = $('#comName').val()==''?'':$.trim($('#comName').val());
						var goodName = $('#goodName').val()==''?'':$.trim($('#goodName').val());
						var linkMan = $('#linkMan').val()==''?'':$.trim($('#linkMan').val());
						var tel = $('#tel').val()==''?'':$.trim($('#tel').val());
						var code = $('#code').val()==''?'':$.trim($('#code').val());

						if(comName == '') {
							showMessage('请输入企业名称');
							return;
						}
						if(goodName == '') {
							showMessage('请输入货品名称');
							return;
						}
						if(linkMan == '') {
							showMessage('请输入联系人');
							return;
						}
						if(tel == '' || !checkTel(tel)) {
							showMessage('请输入正确手机号码');
							return;
						}
						if(codeStaue == '') {
							showMessage('请输入验证码');
							return;
						}
						if(code == '' || code.length < 4) {
							showMessage('请输入正确验证码');
							return;
						}
						commitForm(comName, linkMan, tel, goodName, code);
					});

				});
			}());
		</script>
		<style type="text/css">
			* {
				font-size: 16px;
			}
			
			a {
				color: white;
				text-decoration: none;
			}
			
			.content {
				padding-bottom: 40px;
			}
			
			.form-page {
				transform: translateX(200px);
				-webkit-transform: translateX(200px);
				-moz-transform: translateX(200px);
			}
			
			.move {
				transform: translateX(0px);
				-webkit-transform: translateX(0px);
				-moz-transform: translateX(0px);
				transition: all 0.3s ease-in;
				-moz-transition: all 0.3s ease-in;
				/* Firefox 4 */
				-webkit-transition: all 0.3s ease-in;
				/* Safari and Chrome */
				-o-transition: all 0.3s ease-in;
				/* Opera */
			}
			
			.flex-box {
				display: box;
				display: -webkit-box;
				display: -moz-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				justify-content: flex-start;
			}
			
			.items-center {
				-webkit-box-align: center;
				-moz-box-align: center;
				align-items: center;
				-webkit-align-items: center;
			}
			
			.banner img {
				display: block;
			}
			
			.wd-100 {
				width: 100%;
			}
			
			.banner {
				position: relative;
			}
			
			.logo {
				width: 29%;
				margin: auto;
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
			}
			
			.content {
				padding: 35px 26px;
				text-align: center;
			}
			
			.input-item {
				margin-top: 5px;
				height: 40px;
				overflow: hidden;
				border: 1px solid #CCCCCC;
				border-style: none none solid none;
			}
			
			.input-item img {
				display: block !important;
				width: 17px;
				height: 17px;
				vertical-align: middle;
			}
			
			.input-item input {
				width: 100%;
				display: block !important;
				height: 30px;
				appearance: none;
				-moz-appearance: none;
				-webkit-appearance: none;
				BACKGROUND-COLOR: transparent;
				height: 30px;
				border: none;
				outline: none;
				zoom: 1;
				-webkit-user-modify: read-write-plaintext-only;
				-webkit-tap-highlight-color: rgba(255, 0, 0, 0);
			}
			
			.icon {
				width: 7%;
			}
			
			.placeho {
				width: 25%;
			}
			
			.value {
				overflow: hidden;
				width: 65%;
			}
			
			.getCode {
				margin: 0 3px 0 10px;
				border: 1px solid #F43F39;
				color: #F43F39;
				height: 22px;
				font-size: 12px;
				line-height: 22px;
			}
			
			.commit {
				text-align: center;
				display: block;
				margin: 0 auto;
				width: 265px;
				height: 44px;
				background-image: url(img/commit-button.png);
				background-size: 100% 100%;
				line-height: 44px;
				color: white;
			}
			
			.message {
				display: none;
				z-index: 3;
				position: fixed;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				background-color: rgba(40, 40, 40, 0.5);
				font-size: 12px;
			}
			
			.messagebody {
				position: relative;
				width: 100%;
				height: 100%;
			}
			
			.message-text {
				margin: auto;
				position: absolute;
				top: 40%;
				left: 50%;
				margin-left: -100px;
				width: 200px;
				padding: 15px 10px;
				background-color: white;
				border-radius: 5px;
				text-align: center;
				color: #999999;
				line-height: 1.5;
			}
			.res-logo {
				width: 50px;
				height: 50px;
				display: block;
				margin: 0 auto;
			}
			
			.result-page {
				background-color: #FFFFFF;
				padding-top: 25px;
				text-align: center;
				line-height: 2.7;
			}
			
			.commit2 {
				background-image: url(img/pi-button.png);
			}
			
			::-webkit-input-placeholder {
				/* WebKit browsers */
				color: #999999;
			}
			
			:-moz-placeholder {
				/* Mozilla Firefox 4 to 18 */
				color: #999999;
			}
			
			::-moz-placeholder {
				/* Mozilla Firefox 19+ */
				color: #999999;
			}
			
			:-ms-input-placeholder {
				/* Internet Explorer 10+ */
				color: #999999;
			}
		</style>
	</body>

</html>